<!DOCTYPE HTML>
<html>
  <head>
    <!-- Twitter card -->
    <meta name="twitter:card" value="summary_large_image">
    <meta name="twitter:site" value="@uwdata">
    <meta name="twitter:creator" value="@uwdata">
    <meta name="twitter:url" value="https://vega.github.io/">
    <meta name="twitter:title" value="Vega: A Visualization Grammar">
    <meta name="twitter:description" value="Vega is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.">
    <meta name="twitter:image" value="https://vega.github.io/images/vg.png">
    <!--facebook open graph-->
    <meta property="og:type" content="article">
    <meta property="og:title" content="Vega: A Visualization Grammar">
    <meta property="og:url" content="https://vega.github.io/">
    <meta property="og:description" content="Vega is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.">
    <meta property="og:site_name" content="Vega">
    <meta property="og:image" content="https://vega.github.io/images/vg.png">

    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Vega</title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
  </head>
    <body>
      <div id="main">

        <div class="header">
          <div class="pull-right">
            <a href="https://www.trifacta.com/" title="Trifacta"><img src="images/trifacta-logo.png"/></a> &nbsp;
            <a href="https://idl.cs.washington.edu/" title="Interactive Data Lab"><img src="images/idl-logo.png"/></a>
          </div>
          <div class="mark">
            <span class="uw">Vega & Vega-Lite</span>

            <!-- <span class="mark-i">Vega</span> -->
            <!-- <span class="mark-d">Projects</span> -->
            <!-- <span class="mark-l">Lab</span> -->
          </div>
          <div id="title">Visualization Grammars</div>
          <br/>
        </div>
        <div class="content">

          <div class="mission">
            Vega is a declarative format for creating, saving, and sharing visualization designs.
            With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.
          </div>


          <div class="header">
            <div class="lead">Toolkits</div>
          </div>

          <div class="paper project">

            <div class="thumbnail">
              <a class="thumbnail-wrapper" href="https://vega.github.io/vega/"><div class="thumbnail-img" style="background-image: url(images/vg.png)"></div></a>
              <div class="desc">
                <span class="lead">Vega 2.0</span>
                offers a full declarative visualization grammar, suitable for
                expressive custom interactive visualization design and programmatic generation.

                <div class="links">
                  <p>
                    <a href="https://vega.github.io/vega-editor/?spec=bar">Online Editor & Examples</a>
                    |
                    <a href="https://github.com/vega/vega/wiki">Documentation</a>
                    |
                    <a href="https://www.github.com/vega/vega">GitHub</a>
                  </p>
                </div>
              </div>
            </div> <!-- /Vega -->


            <div class="thumbnail">
              <a class="thumbnail-wrapper" href="https://vega.github.io/vega-lite"><div class="thumbnail-img" style="background-image: url(images/vl.png)"></div></a>
              <div class="desc">
                <span class="lead">
                  <strong class="new">new</strong> Vega-Lite
                </span>
                provides a higher-level grammar for visual analysis, comparable
                to ggplot or Tableau, that generates complete Vega specifications.

                <div class="links">
                  <p>
                    <a href="https://vega.github.io/vega-editor/?mode=vega-lite">Online Editor</a>
                    | 
                    <a href="https://vega.github.io/vega-lite/examples/">Examples</a>
                    |
                    <a href="https://vega.github.io/vega-lite">Documentation</a>
                    |
                    <a href="https://www.github.com/vega/vega-lite">GitHub</a>
                  </p>
                </div>
              </div>
            </div><!-- /Vega-Lite -->

          </div><!-- /Toolkits -->

          <div style="clear:both"></div>

          <div class="header">
            <div class="lead">Systems</div>
          </div>

          <div class="paper project">

            <div class="thumbnail">
              <a class="thumbnail-wrapper" href="https://idl.cs.washington.edu/projects/lyra/"><div class="thumbnail-img" style="background-image: url(images/lyra.png)"></div></a>

              <div class="desc">
                <span class="lead">
                  <a href="https://idl.cs.washington.edu/projects/lyra/">Lyra</a>
                </span>
                is an interactive environment that enables custom visualization design.
                Without writing any code, designers can create visualizations on-par with hand-coded D3 and Processing.
                <div class="links">
                  <p>
                  <a href="https://idl.cs.washington.edu/projects/lyra/app/">Online App</a>
                  |
                  <a href="https://idl.cs.washington.edu/projects/lyra/#examples">Examples</a>
                  |
                  <a href="https://github.com/vega/lyra/wiki">Documentation</a>
                  |
                  <a href="https://github.com/vega/lyra">GitHub</a>
                </div>
              </div>
            </div><!-- /Lyra -->

            <div class="thumbnail">
              <a href="https://www.github.com/vega/polestar" class="thumbnail-wrapper"><div class="thumbnail-img" style="background-image: url(images/polestar.png); background-position: top-left;"></div></a>
              <div class="desc">
                <span class="lead">
                  PoleStar
                </span>
                is a web-based visualization specification interface, inspired by Tableau.
                Analysts can rapidly generate visualizations as part of the
                data exploration process.

                <div class="links">
                  <p><a href="https://vega.github.io/polestar">Online App</a>
                  |
                  <a href="https://www.github.com/vega/polestar">GitHub</a></p>
                </div>
              </div>
            </div> <!-- /PoleStar -->

            <div class="thumbnail">
              <a href="https://www.github.com/vega/voyager" class="thumbnail-wrapper"><div class="thumbnail-img" style="background-image: url(images/voyager_main.png); background-position: top-left;"></div></a>
              <div class="desc">
                <span class="lead">
                  Voyager
                </span>
                is a visualization browser for open-ended data exploration.
                It provides a gallery of recommended visualizations, produced by Compass
                visualization recommender engine.
                <div class="links">
                  <p><a href="https://vega.github.io/voyager">Online App</a>
                  |
                  <a href="https://www.github.com/vega/voyager">GitHub</a></p>
                </div>
              </div>
            </div><!-- /Voyager -->

            <div class="thumbnail">
              <a href="https://www.github.com/vega/compass" class="thumbnail-wrapper"><div class="thumbnail-img" style="background-image: url(images/compass.png); background-size: contain; background-position: center center; background-repeat: no-repeat;"></div></a>
              <div class="desc">
                <span class="lead">
                  Compass
                </span>
                is a visualization recommendation engine.
                Given user query, it suggests visualizations, ranked by both
                data properties and perceptual principles.

                <div class="links">
                  <a href="https://www.github.com/vega/compass">GitHub</a></p>
                </div>
              </div>
            </div><!-- /Voyager -->

          </div><!-- /Systems -->

          <div style="clear:both"></div>

          <div class="header">
            <div class="lead">Vega's 3rd Party Integration</div>
          </div>

          <div class="paper project">
            <p><a href="http://ggvis.rstudio.com">ggvis</a> is a data visualization package for R that renders web-based visualizations using Vega. It features a syntax similar in spirit to ggplot2.</p>

            <p><a href="https://vincent.readthedocs.org/en/latest/index.html">Vincent</a> allows you to build Vega specifications in a Pythonic way. It performs
            type-checking to ensure your specifications are correct, and offers convenience methods that turn Python data structures into Vega specifications.</p>
            
            <p><a href="https://johnmyleswhite.github.io/Vega.jl/">Vega.jl</a> uses the <a href="http://julialang.org/">Julia programming language</a> to generate spec-compliant Vega 2.x visualizations. Vega.jl is integrated with Jupyter Notebook, and provides a high-quality visualization experience for scientific computing.  </p>

            <p>The MediaWiki <a href="https://www.mediawiki.org/wiki/Extension:Graph/Demo">Graph extension</a> allows you to embed Vega visualizations on MediaWiki sites, including Wikipedia.</p>

            <p><a href="https://esri.github.io/cedar/" title="Esri Cedar github page">Cedar</a> integrates Vega with the GeoServices from ArcGIS. It adds templated documents for reusable charts that programatically bind to new data sources.</p>
          </div>
          
          <div class="header">
            <div class="lead">Vega-Lite's 3rd Party Integration</div>
            
            <p><a href="https://vega.github.io/vega-lite/usage/applications.html">Check out the list of applications on the Vega-Lite website.</a>
          </div>

        </div>
        <div class="footer">
          Edit this page at <a href="https://github.com/vega/vega.github.io">github.com/vega/vega.github.io</a>.
        </div>
      </div>
      <script type="text/javascript">
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-44428446-5', 'auto');
        ga('send', 'pageview');

        ga('create', 'UA-48049134-5', 'auto', {'name': 'arvindsatya1'});
        ga('arvindsatya1.send', 'pageview');
      </script>
    </body>
</html>
